Emacs 對於編輯 Vue.js 專案的支援

• 程式補全：company-tide (javascript), company-web-html (html), company-css (css)
• 語法檢查：flycheck + eslint (本地 eslint + plugin/vue-essential, eslint:recommended)
• 支援 css 顏色顯示
• 支援 emmet 快速輸入語法
• 程式排版美化: 使用 prettier-js

安裝

• 先前設定的 web-mode 是用來編輯 html 的主模式，事實上，html 也可能包含了 javascript 跟 css，因此這個模式本身已經考慮到當有 javascript 跟 css 時的顯示，但是畢竟在設定上可能有所不同，因此我們想藉由不同的檔案副檔名來界定

(use-package web-mode
  :ensure t
  :mode ("\\.html\\'" "\\.vue\\'")
  :config
  (setq web-mode-markup-indent-offset 2)
  (setq web-mode-css-indent-offset 2)
  (setq web-mode-code-indent-offset 2)
  (setq web-mode-enable-current-element-highlight t)
  (setq web-mode-enable-css-colorization t)
  (set-face-attribute 'web-mode-html-tag-face nil :foreground "royalblue")
  (set-face-attribute 'web-mode-html-attr-name-face nil :foreground "powderblue")
  (set-face-attribute 'web-mode-doctype-face nil :foreground "lightskyblue")
  (setq web-mode-content-types-alist
        '(("vue" . "\\.vue\\'")))
  (use-package company-web
    :ensure t)
  (add-hook 'web-mode-hook (lambda()
                             (cond ((equal web-mode-content-type "html")
                                    (my/web-html-setup))
                                   ((member web-mode-content-type '("vue"))
                                    (my/web-vue-setup))
                                   )))
  )

• 我們增加了對於 .vue 的支援，並且加入一個新的 web-mode-content-type "vue" 來區別是 html 或者是 vue 檔案，並分別為之做設定

(defun my/web-vue-setup()
  "Setup for js related."
  (message "web-mode use vue related setup")
  (setup-tide-mode)
  (prettier-js-mode)
  (flycheck-add-mode 'javascript-eslint 'web-mode)
  (flycheck-select-checker 'javascript-eslint)
  (my/use-eslint-from-node-modules)
  (add-to-list (make-local-variable 'company-backends)
               '(comany-tide company-web-html company-css company-files))
  )

• 設定在這種檔案下，只使用 flycheck + javascript-eslint 來做語法檢查，並使用本地的 eslint 跟設定
• 使用的程式補全為 company-tide, company-web-html 跟 company-css 並啟動 tide-mode 次模式
• 使用 prettier-js 來做排版

借用 lunaryorn 在 https://emacs.stackexchange.com/questions/21205/flycheck-with-file-relative-eslint-executable 中的作法

(defun my/use-eslint-from-node-modules ()
  "Use local eslint from node_modules before global."
  (let* ((root (locate-dominating-file
                (or (buffer-file-name) default-directory)
                "node_modules"))
         (eslint (and root
                      (expand-file-name "node_modules/eslint/bin/eslint.js"
                                        root))))
    (when (and eslint (file-executable-p eslint))
      (setq-local flycheck-javascript-eslint-executable eslint))))

(add-hook 'flycheck-mode-hook #'my/use-eslint-from-node-modules)

原先在 Vue/cli 產生的 package.json已經定義跟安裝了 plugin:vue/essential

 "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

相關影片:

相關簡報: 簡報

相關程式： Github 請下載到 ~/.emacs.d 下啟動 Emacs 就會自動設定安裝套件

相關資訊: 我的部落格